{% extends "base.html" %}

{% block title %}{{ user.info.name }}'s Cart{% endblock %}

{% block head_script %}
<script type="text/javascript" src="/static/js/cart.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        init_cart();
    });
</script>
{% endblock %}

{% block main_content %}
<div class="row tabbale">
    <ul id="cart-nav" class="nav nav-pills nav-stacked span3">
        <li {% if section == "C" %}class="active"{% endif %}>
            <a id="show-cart" href="#cart-section" data-toggle="pill">
                <i class="icon-shopping-cart {% if section == "C" %}icon-white{% endif %}"></i>
                Cart
            </a>
        </li>
        <li {% if section == "P" %}class="active"{% endif %}>
            <a id="show-purchase" href="#purchase-section" data-toggle="pill">
                <i class="icon-th-list {% if section == "P" %}icon-white{% endif %}"></i>
                Purchase History
            </a>
        </li>
        <li {% if section == "R" %}class="active"{% endif %}>
            <a id="show-reservation" href="#reservation-section" data-toggle="pill">
                <i class="icon-list-alt {% if section == "R" %}icon-white{% endif %}"></i>
                Reservation History
            </a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="span9 tab-pane {% if section == "C" %}active{% endif %}" id="cart-section">
            {% if sale %}
            {% include "shop/sale-table.html" %}
            <a href="#" id="checkout" class="btn btn-primary">
                <i class="icon-ok-sign icon-white"></i>
                Checkout
            </a>
            <a href="#" id="reserve" class="btn">
                <i class="icon-ok-circle"></i>
                Reserve
            </a>
            {% else %}
            <div class="alert alert-info">
                <p>You haven't purchased any item yet.</p>
                <p>
                    <strong><a href="/shop">Browse</a></strong> for items and add some to cart!
                </p>
            </div>
            {% endif %}
        </div>
        <div class="span9 tab-pane {% if section == "P" %}active{% endif %}" id="purchase-section">
            {% if purchases %}
                {% for sale in purchases %}
                {% include "shop/sale-cell.html" %}
                {% endfor %}
            {% else %}
            <div class="alert alert-info">
                <p>You haven't purchased any item yet.</p>
                <p>
                    <strong><a href="/shop">Browse</a></strong> for items and add some to cart!
                </p>
            </div>
            {% endif %}
        </div>
        <div class="span9 tab-pane {% if section == "R" %}active{% endif %}" id="reservation-section">
            {% if reservations %}
                {% for sale in reservations %}
                {% include "shop/sale-cell.html" %}
                {% endfor %}
            {% else %}
            <div class="alert alert-info">
                <p>You haven't made any reservation yet.</p>
                <p>
                    <strong><a href="/shop">Browse</a></strong> for items and add some to cart!
                </p>
            
            </div>
            {% endif %}
        </div>
    </div>
</div>

<div class="modal fade hide" id="checkout-modal" style="display: none;">
    <div class="modal-header">
        <a data-dismiss="modal" class="close"></a>
        <h3>Checkout your cart</h3>
    </div>
    <div class="modal-body">
        <p>
            Click Confirm to make a purchase.
        </p>
        <p>
            <strong class="total-price"></strong> will be taken off from your account.
        </p>
        <div class="alert alert-info" style="display: none;">
            <strong>Oops!</strong> There is not enough deposit in your account.
            <a href="/recharge">
                Recharge Now
                <i class="icon-arrow-right"></i>
            </a>
        </div>
    </div>
    <div class="modal-footer">
        <a href="/shop/checkout" class="btn btn-primary">Confirm</a>
        <a href="#" class="btn" id="checkout-modal-cancel">Cancel</a>
    </div>
</div>

<div class="modal fade hide" id="reserve-modal" style="display: none;">
    <div class="modal-header">
        <a data-dismiss="modal" class="close"></a>
        <h3>Make a reservation</h3>
    </div>
    <div class="modal-body">
        <p>
            Click Confirm to make a reservation.
        </p>
        <p>
            <strong class="total-price"></strong> will be taken off from your account.
        </p>
        <div class="alert alert-info" style="display: none;">
            <strong>Oops!</strong> There is not enough deposit in your account.
            <a href="/recharge">
                Recharge Now
                <i class="icon-arrow-right"></i>
            </a>
        </div>
    </div>
    <div class="modal-footer">
        <a href="/shop/reserve" class="btn btn-primary">Confirm</a>
        <a href="#" class="btn" id="reserve-modal-cancel">Cancel</a>
    </div>
</div>

<div class="modal fade hide" id="payoff-modal" style="display: none;">
    <div class="modal-header">
        <a data-dismiss="modal" class="close"></a>
        <h3>Pay off reservation</h3>
    </div>
    <div class="modal-body">
        <p>
            Click Confirm to make a reservation.
        </p>
        <p>
            To pay off, <strong class="total-price"></strong> will be taken off from your account.
        </p>
        <div class="alert alert-info" style="display: none;">
            <strong>Oops!</strong> There is not enough deposit in your account.
            <a href="/recharge">
                Recharge Now
                <i class="icon-arrow-right"></i>
            </a>
        </div>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn btn-primary" id="payoff-modal-confirm">Confirm</a>
        <a href="#" class="btn" id="payoff-modal-cancel">Cancel</a>
    </div>
</div>
{% endblock %}
